<template>
	<view class="page">
		<view class="content user-info-content">
			<view class="user-info-img">
				<image src="../../static/c1.png" mode="widthFix"></image>
			</view>
			<view class="user-info">
				<view class="name">
					姓名
					<view class="job">外业调查员</view>
				</view>
				<view class="phone">
					1888888888
				</view>
				<view class="address">
					青海省/西宁市/平安县
				</view>
			</view>
			<view class="record">
				调查记录
			</view>
			<view class="plot-wrap">
				<view class="plot-item">
					<view class="count">
						<text>3</text>条
					</view>
					<view>项目数量</view>
				</view>
				<view class="plot-item">
					<view class="count">
						<text>54</text>个
					</view>
					<view>样地数量</view>
				</view>
				<view class="plot-item">
					<view class="count">
						<text>23</text>个
					</view>
					<view>调查数量</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="menu-item">
				数据上报
			</view>
			<view class="data-wrap">
				<view class="data-item">
					<view class="count">
						<text>3</text>条
					</view>
					<view>样地数量</view>
				</view>
				<view class="data-item">
					<view class="count">
						<text>54</text>个
					</view>
					<view>样方数量</view>
				</view>
				<view class="data-item">
					<view class="count">
						<text>23</text>个
					</view>
					<view>调查数量</view>
				</view>
			</view>
		</view>
		<view class="content menu-wrap">
			<view class="menu-item">
				离线地图
			</view>
			<view class="menu-item">
				数据同步
			</view>
			<view class="menu-item">
				关于系统
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.page{
	width: 100%;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
	padding-top: 300rpx;
	padding-bottom: 60rpx;
	font-size: 28rpx;
	&::after{
		content: '';
		display: block;
		background-color: #2979ff;
		width: 100%;
		height: 30vh;
		position: fixed;
		top: 0;
		left: 0;
		border-bottom-right-radius: 100rpx;
		border-bottom-left-radius: 100rpx;
		z-index: 1;
	}
	
	.content{
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		position: relative;
		z-index: 10;
		margin-bottom: 20rpx;
	}
	.user-info-content{
		box-sizing: border-box;
		padding-top: 50rpx;
		.user-info-img{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #fff;
			top: -120rpx;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			image{
				width: 100%;
				height: auto;
			}
			
		}
		.user-info{
			text-align: center;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			.name{
				position: relative;
				.job{
					background-color: #facd91;
					color: #fff;
					position: absolute;
					right: 50rpx;
					display: inline-block;
					box-sizing: border-box;
					padding: 0 10rpx;
					height: 1.6em;
					line-height: 1.6em;
					border-radius: .8em;
				}
			}
		}
		.record{
			width: 100%;
			font-size: 28rpx;
			color: #666;
			position: relative;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			border-bottom: 1rpx #f1f1f1 solid;
			margin-bottom: 20rpx;
			&::after{
				display: inline-block;
				font-size: 36rpx;
				content: ">";
				position: absolute;
				right: 20rpx;
				color: #999;
			}
		}
		.plot-wrap{
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 10rpx;
			text-align: center;
			text{
				font-weight: bold;
				color: #666;
				font-size: 46rpx;
				padding: 0 10rpx;
			}
		}
	}
	.data-wrap{
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		text-align: center;
		text{
			font-weight: bold;
			color: #666;
			font-size: 46rpx;
			padding: 0 10rpx;
		}
	}
	.menu-item{
		width: 100%;
		font-size: 28rpx;
		color: #666;
		position: relative;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-bottom: 1rpx #f1f1f1 solid;
		margin-bottom: 20rpx;
		&::after{
			display: inline-block;
			font-size: 36rpx;
			content: ">";
			position: absolute;
			right: 20rpx;
			color: #999;
		}
	}
}
</style>
